<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>正则表达式</h1>
    <p>正确规则的表达式子。</p>
    <p>主要用于校验字符串是否符合预订的规则，常用于校验表单等用户输入的情形。</p>
    <p>特别是在html5中，input标签可以使用pattern属性来定义一个正则表达式，在提交表单时会进行内容校验。</p>
    <h2>创建正则表达式</h2>
    <ul>
        <li>使用new关键字：new RegExp("box")</li>
        <li>使用字面量：/box/</li>
    </ul>
    <h2>元字符</h2>
    <ul>
        <li>元字符用于描述正则表达式更细致的规则。</li>
    </ul>
    <form>
        <input pattern="\d{3,5}">
        <input type="submit" value="提交">
    </form>
    <h2>作业</h2>
    <dl>
        <dt>选做</dt>
        <dl>定义一个正则表达式：校验是实数（正数、负数、0）</dl>
        <dl>定义一个正则表达式：校验正整数（数学范围内，2、2.00、2.0000000）</dl>
    </dl>
    <script>
        // new RegExp有两个参数：
        // 参数1：规则
        // 参数2：模式 i：表示为忽略大小写
        let reg1 = new RegExp("box","i");

        let reg2 = /box/i;

        // test(str)方法：返回传入的str是否符合正则表达式。
        let str = "BbOxX";
        let b = reg1.test(str);
        console.log("b = ",b);

        // 此时：我们可以匹配只要字符串中包含BOX三个字母即可（无需考虑大小写）
        // 但是离只能输入BOX还有一定差距。于是需要引入“元字符”的概念。

        // 以下是只能输入3-5数字的正则表达式写法：
        reg = /^\d{3,5}$/;

        console.log("----------------分隔符----------------")

        str = "1234567";
        b = reg.test(str); // false
        console.log("b = ",b);

        str = "12345";
        b = reg.test(str); // true
        console.log("b = ",b);

        str = "b234b";
        b = reg.test(str); // false
        console.log("b = ",b);


        // exec返回第一个符合结果
        reg = /box/i;
        str = "My box is a big Box";
        let r = reg.exec(str);
        console.log(r);

    </script>
</body>
</html>